<template>
  <div class="contentWeb clear">
    <div class="member_menu">
      <Personleft active="work"/>
    </div>
    <div class="member_right ">
      <div class="personTengt">
        <Memtitle name="工作经验"/>
        <div class="jingyan" v-for="(item, index) in datalist" :key="index">
          <div class="mktitle clear">
            <div class="mleft">
              <span>{{item.startTime}} - {{item.endTime}}</span>
              <span>{{item.companyName}}</span>
              <span>{{item.department}}</span>
              <span>{{item.position}}</span>
            </div>
            <div class="mright">
              <i class="el-icon-edit" @click="edit(item.id)"></i>
              <i class="el-icon-delete" @click="deleteExperience(item.id)"></i>
            </div>
          </div>
          <div class="desc">
            <span>{{item.nature}}</span>
            <span>{{item.industry}}</span>
            <span>{{item.companySize}}</span>
          </div>
          <div class="misoshu">
            <div class="lefts">工作描述</div>
            <div class="rights">{{item.workDescribe}}
            </div>
          </div>
        </div>

        <div style="text-align: center; margin-top: 50px;">
          <el-button type="primary" @click="add" style="background: #20a2b2; width: 298px; border: 0;">
            新增工作经验
          </el-button>

        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/babel">
// @ is an alias to /src

import Memtitle from '../../components/memtitle'
import Personleft from '../../components/personleft'
import { ExperienceList, deleteExperience, workType } from '../../assets/js/domains'
import moment from 'moment'

export default {
  name: 'PersonWork',
  components: {
    Personleft,
    Memtitle
  },
  directives: {},
  data: function () {
    return {
      workType: workType,
      datalist: [],
      user_uid: ''
    }
  },
  created: function () {
    document.documentElement.scrollTop = document.body.scrollTop = 0
  },
  computed: {},
  mounted: function () {
    this.user_uid = localStorage.getItem('md_user_uid')
    this.getpost()
  },
  methods: {
    onSubmit: function () {
    },
    add: function () {
      this.$router.push({ path: 'workAdd' })
    },
    getpost: function () {
      const _this = this
      ExperienceList({ user_uid: this.user_uid }).then(function (res) {
        if (res.code === 200) {
          _this.datalist = res.data.map(item => {
            item.startTime = moment(item.startTime).format('YYYY/MM')
            item.endTime = moment(item.endTime).format('YYYY/MM')
            return item
          })
        }
      })
    },
    edit: function (id) {
      this.$router.push({
        path: 'workAdd',
        query: { id: id }
      })
    },
    // 删除工作经验
    deleteExperience: function (id) {
      const _this = this
      this.$confirm('此操作将永久删除该工作经验, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        deleteExperience({ id: id }).then(function (res) {
          if (res.code === 200) {
            _this.$message({
              type: 'success',
              message: '删除成功!'
            })
            _this.getpost()
          }
        })
      }).catch(function () {
        _this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>
<style lang="less" scoped>
  @import "../../assets/css/member";
</style>
